<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>充值</title>
    <link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet"/>
    <style>
        body {
            background: #f2f2f2;
            color: #333;
        }

        .page__hd {
            padding: 20px;
        }

        .page__title {
            text-align: left;
            font-size: 20px;
            font-weight: 600;
        }

        .weui-cells {
            margin-top: 0;
        }

        button[disabled] {
            opacity: 0.7;
        }

        .gift {
            background: red;
            margin-left: 10px;
            color: #fff;
            padding: 2px 4px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: bold;
        }

        .weui-btn {
            background: #333 !important;
        }

        .weui-cells_radio .weui-check:checked+.weui-icon-checked:before {
            color: #333;
        }
    </style>


    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

<body>
<div class="container" id="container">
    <div class="page home js_show">
        <div class="page__hd">
            <h1 class="page__title">充值积分</h1>
        </div>
        <div class="page__bd">
            <div class="weui-cells__title">充值选择</div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x0">
                    <div class="weui-cell__bd">
                        <p>3元 = 48积分
                            <span class="gift">入门选择</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio" checked="checked" id="x0" value="0"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x1">
                    <div class="weui-cell__bd">
                        <p>10元 = 200积分
                            <span class="gift">主流选择</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio" checked="checked"  id="x1" value="1"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>

            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x2">
                    <div class="weui-cell__bd">
                        <p>20元 = 500积分
                            <span class="gift">加赠25%</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio"  id="x2" value="2"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
<!--            <div class="weui-cells weui-cells_radio">-->
<!--                <label class="weui-cell weui-check__label" for="x3">-->
<!--                    <div class="weui-cell__bd">-->
<!--                        <p>20元 = 360积分-->
<!--                            <span class="gift">主流选择(预计可省180元)</span>-->
<!--                        </p>-->
<!--                    </div>-->
<!--                    <div class="weui-cell__ft">-->
<!--                        <input type="radio" class="weui-check" name="radio" id="x3" value="3"/>-->
<!--                        <span class="weui-icon-checked"></span>-->
<!--                    </div>-->
<!--                </label>-->
<!--            </div>-->

            <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" onclick="fun()" id="charge">立即充值</button>
            </div>
        </div>
    </div>
    <div style="padding: 15px; font-size: 14px;">
        <p>1. 请关注我们的公众号：
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==3}">外卖省钱帮手</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==4}">外卖指数</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==7}">外卖优惠平台</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==8}">惠食客</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==9}">好惠点外卖</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==10}">外卖生活服务</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==11}">MGHFY</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==12}">外卖省钱小助手</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==13}">拾惠客</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==14}">外卖省钱时代</span>
            <span style="text-decoration: underline;" class="gzh" th:if="${platform==15}">外卖小秘书</span>
            ，方便参与更多活动。
        </p>
        <p>2. 积分永久有效，可用于本公众号的饿了么红包领取。</p>
        <input id="platform" name="platform" type="hidden" th:value="${platform}">
        <input id="openid" name="openid" type="hidden" th:value="${openid}">
        <input id="pay_js_openid" name="payjs_openid" type="hidden" th:value="${payjs_openid}">
    </div>
    <div style="text-align: center; font-size: 14px; margin-bottom: 20px; line-height: 1; margin-top: 10px;" onclick="updateOpenid()">下单账号与支付账号不一致？点击修复
    </div>
</div>
</body>
</html>
<script>
    var platform = $("#platform").val();
    function fun(){
        var type = $("input[name=\"radio\"]:checked").val();
        var pay_js_openid = $("#pay_js_openid").val();
        var openid = $("#openid").val();
        $.post('/payJs',{"payJsOpenId":pay_js_openid,"openId":openid,"type":type,"platform":platform},function (str) {
            var data = JSON.parse(str);
            function onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":data.jsapi.appId,     //公众号名称，由商户传入
                        "timeStamp":data.jsapi.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr":data.jsapi.nonceStr, //随机串
                        "package":data.jsapi.package,
                        "signType":data.jsapi.signType,
                        "paySign":data.jsapi.paySign //微信签名
                    },
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        }
                    });
            }
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                onBridgeReady();
            }
        })
    }
    function updateOpenid() {
        document.cookie = "PAY_JS_OPENID=; expires=" + new Date(2000, 1, 1).toString()+"Path=/pay/";
        window.location.href='/pay/?platform='+platform;
    }
</script>
